<template>
	<view class="container">
		<!-- 全部 -->
		<myTab :list="list1" @itemClick='itemClick'></myTab>
		<view class="inner">
			<view class="inner-items" v-if="withList.length>0">
				<view class="dis_flex" v-for="(item,index) in withList" :key="index">
					<view class="detailed_flex detailed_1">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/Recharge.png" class="det_img1"/>
						<view class="detailed_flex_right">
							 <view class="detailed_flex_right_tit">
							 	<view class="tit">充值方式：{{item.type_text}}</view>
								<view class="time">{{item.add_time}}</view>
							 </view>
							 <view class="money">充值金额：{{item.order_amount}}元</view>
						</view>
					</view>
					<view class="detailed_flex_bottom">
						<text>充值状态：{{item.status_text}}</text>
						<view class="right" v-if="item.order_status==-1">
							<button size="mini" @click="showCancel(item)">取消</button>
							<button size="mini" class="confirm" @click="zhifu(item)">支付</button>
						</view>
					</view>
				</view>
				<u-loadmore :status="hasMore?'loading':'nomore'" />
			</view>
			<view class="dis_flex_no" v-else>
				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/Notyet.png" mode="widthFix"></image>
				<text>暂无相关记录</text>
			</view>
		</view>
		<u-popup :safeAreaInsetBottom="false" :safeAreaInsetTop="false" mode="center" :show="cancelShow" round="5"
			:overlay="true" :customStyle="customStyle1" @close="cancelShow=false">
			<view class="u-popup-slot">
				<text class="u-popup-slot_text">确认取消？</text>
				<view class="u-popup-slot_flex">
					<button @click="cancelShow = !cancelShow" class="cancel">取消</button>
					<button @click="cancel()" class="confirm">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var _this
	export default {
		data() {
			return {
				cancelShow:false,
				list1: [{
					name: '全部',
				}, {
					name: '待支付',
				}, {
					name: '已支付'
				}, {
					name: '已取消'
				}],
				customStyle1: {
					'width': '80%'
				},
				tempItem:{},
				index: 0,
				withList: [],
				pageIndex:1,
				status:'0',
				hasMore:true
			}
		},
		onLoad() {
			_this=this
			this.withlist();
		},
		onReachBottom() {
			if(this.hasMore){
				this.pageIndex++
				this.withlist()
			}
		},
		methods: {
			showCancel(item){
				_this.tempItem=item
				_this.cancelShow=true
			},
			itemClick(index) {
				this.status = index
				this.pageIndex = 1
				this.withList = []
				this.withlist()
			},
			//获取提现记录列表
			async withlist() {
				const params = {
					pageIndex:this.pageIndex,
					pageSize:20,
					status:this.status
				}
				const data = await _this.$post('api/cz_list',params)
				this.withList.push(...data.data.list)
				this.hasMore=data.data.list.length>=20
			},
			async zhifu(item){
				let openid=uni.getStorageSync('openid') || 'o4RE35WBIPcCtRZDphyMwBozNK80'
				const params = {
					id:item.id,
					type:2,
					openid
				}
				const data = await _this.$post('api/do_cz_list',params)
				if(data.code==50){
					//唤起微信支付
					uni.requestPayment({
					    provider: 'wxpay',
						timeStamp: data.data.result.timeStamp+'',
						nonceStr: data.data.result.nonceStr,
						package: data.data.result.package,
						signType: data.data.result.signType,
						paySign: data.data.result.sign,
						success: function (res) {
							_this.$u.toast('支付成功')
							item.order_status=1
							item.status_text='已支付'
						},
						fail: function (err) {
							_this.cancelShow=false
							console.log('fail:' + JSON.stringify(err));
						}
					});
				}else{
					uni.$u.toast(data.msg)
				}
			},
			async cancel(){
				const params = {
					id:_this.tempItem.id,
					type:1
				}
				const data = await _this.$post('api/do_cz_list',params)
				if(data.code==200){
					uni.$u.toast(data.msg)
					_this.cancelShow=false
					_this.tempItem.order_status=2
					_this.tempItem.status_text='已取消'
				}else{
					uni.$u.toast(data.msg)
				}
			}
		}
	}
</script>
<!-- #ifdef APP-PLUS -->
<style>
	page{
		background: #FFFFFF;
	}
</style>
<!-- #endif -->
<style lang="scss" scoped>
	page{
		background: #FFFFFF;
	}
	.container{
		.inner{
			padding: 20rpx 20rpx 0 20rpx;
			.dis_flex {
				display: flex;
				flex-direction: column;
				border-radius: 10px;
				padding:0 20rpx 0 20rpx;
				margin-bottom: 20rpx;
				box-shadow: $global-shade;
				.detailed_flex {
					display: flex;
					.det_img1 {
						border-radius: 5rpx;
						width: 60rpx;
						height: 60rpx;
						margin-right: 20rpx;
						align-self: center;
					}
					.detailed_flex_right{
						flex: 1;
						border-bottom: 1px solid #F3F3F3;
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 120rpx;
						.detailed_flex_right_tit{
							.tit{
								font-size: 28rpx;
							}
							.time{
								margin-top: 10rpx;
							}
						}
						.money{
						}
					}
				}
				.detailed_flex_bottom{
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.right{
						button{
							min-width: 128rpx;
							height: 48rpx;
							line-height: 42rpx;
							font-size: 26rpx;
							text-align: center;
							color: #525252;
							border: 1px solid #999;
							border-radius: 30rpx;
							background: none;
							&:not(:last-child) {
								margin-right: 20rpx;
							}
							&.confirm{
								color: #fff;
								border: 1px solid $theme-color;
								background-color: $theme-color;
							}
						}
					}
				}
			}
			.dis_flex_no{
				padding-top: 20%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image{
					width: 106rpx;
				}
				text{
					margin-top: 20rpx;
					color: #bcbcbc;
				}
			}
		}
	}
	
	.green{
		background-color: #E7F6EF;
		color: #02AB20;
		border-radius:15rpx ;
		padding: 0 6rpx;
	}
	.blue{
		background-color: #D4E0F7;
		color:#3978EC ;
		border-radius: 15rpx;
		padding: 0 6rpx;
	}
</style>
